<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>music</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            /* 背景图 */
            .bj {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                z-index: -1000;
            }
            /* 整体 */
            .container {
                width: 800px;
                height: 500px;
                background-color: rgba(248, 250, 252, 0.3);
                border-radius: 10px;
                position: relative;
                overflow: hidden;
            }
            /* 头部 */
            .top {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 60px;
                border-radius: 10px 10px 0 0;
                background-image: linear-gradient(45deg, rgb(99, 202, 243), rgb(9, 253, 180), rgb(40, 106, 230));
                z-index: 11;
            }
            .txt {
                position: absolute;
                top: 15px;
                right: 50px;
                width: 200px;
                height: 30px;
                outline: none;
                border-radius: 15px;
                border: none;
                background-color: rgba(255, 255, 255, 0.8);
                padding: 0 20px 0 20px;
                font-size: 13px;
            }
            /* 歌曲列表 */
            .list {
                position: absolute;
                left: 0;
                top: 60px;
                width: 200px;
                height: 410px;
                background-color: rgba(255, 255, 255, 0.5);
            }
            .list > ul {
                position: absolute;
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            .list > ul > li {
                position: relative;
                width: 100%;
                height: 40px;
                line-height: 40px;
                font-family: 'fangsong';
                font-size: 16px;
                margin-top: 1px;
                padding-left: 30px;
                background-color: rgba(255, 255, 255, 0.9);
            }
            .list > ul > li > a {
                position: absolute;
                top: 50%;
                left: 5px;
                transform: translateY(-50%);
                width: 20px;
                height: 20px;
                background-image: url(img/play.png);
                background-size: 100% 100%;
            }
            /* 中间部分 */
            .middle {
                position: absolute;
                left: 210px;
                top: 60px;
                width: 410px;
                height: 410px;
            }
            .disk {
                position: absolute;
                width: 280px;
                height: 280px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) rotateZ(0deg);
            }
            .bar {
                position: absolute;
                top: -10px;
                left: 50%;
                z-index: 10;
                transform-origin: 10px 10px;
                /*  10 -25 */
                transform: rotateZ(-25deg);
                transition: all 1s;
            }
            .poster {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 160px;
                height: 160px;
                border-radius: 50%;
                object-fit: cover;
            }
            /* 评论 */
            .comment {
                position: absolute;
                top: 80px;
                right: -20px;
                height: 410px;
                width: 230px;
                overflow: auto;
                background-color: rgba(255, 255, 255, 0.4);
                border-top-left-radius: 15px;
            }
            .commentTxt {
                position: absolute;
                top: 60px;
                right: 110px;
                width: 100px;
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                color: rgb(0, 0, 0);
            }
            .comment > ul > li {
                width: 210px;
                min-height: 50px;
                margin-top: 10px;
                font-size: 13px;
                padding: 5px;
                text-align: justify;
            }
            .comment > ul > li > img {
                border-radius: 50%;
                display: inline-block;
                vertical-align: middle;
            }
            .comment > ul > li > h3 {
                display: inline-block;
                padding-left: 5px;
            }
            .comment > ul > li > p {
                padding-top: 6px;
                display: block;
                text-indent: 2em;
            }
            /* 进度条 */
            .music {
                position: absolute;
                bottom: 0px;
                left: 0px;
                width: 800px;
                height: 34px;
                outline: none;
                background-color: rgb(241, 243, 244);
            }
            /* 杆和唱片转动 */
            .playing {
                transform: rotateZ(10deg);
            }
            .turn {
                animation: turn 3s linear infinite;
            }
            @keyframes turn {
                0% {
                    transform: translate(-50%, -50%) rotateZ(0deg);
                }
                100% {
                    transform: translate(-50%, -50%) rotateZ(360deg);
                }
            }
        </style>
    </head>
    <body>
        <video src="./video.mp4" class="bj" muted autoplay loop></video>
        <!-- 最底层的盒子 -->
        <div class="container" id="container">
            <!-- 头部区域盒子 -->
            <div class="top">
                <!-- 搜索框 -->
                <input type="text" class="txt" v-model="query" @keyup.enter="searchMusic" />
            </div>
            <!-- 歌曲列表区域 -->
            <div class="list">
                <ul>
                    <!-- 每个li是一首歌 -->
                    <li v-for="(item,index) in musicList " :key="index">
                        <a href="javascript:;" @click="playMusic(item.id)"></a>
                        {{item.name}}
                    </li>
                </ul>
            </div>
            <!-- 中间区域 -->
            <div class="middle">
                <!-- 那个旋转的杆 -->
                <img src="img/player_bar.png" alt="x" class="bar" :class="{playing:isPlay}" />
                <!-- 唱片 -->
                <img src="img/disc.png" alt="x" class="disk" :class="{turn:isPlay}" />
                <!-- 唱片中间的海报 -->
                <img :src="poster" class="poster" />
            </div>
            <!-- 评论区 -->
            <h5 class="commentTxt">热门评论：</h5>
            <div class="comment">
                <ul>
                    <!-- 每条评论 -->
                    <li v-for="(item,index) in comment" :key="index">
                        <!-- 头像 -->
                        <img :src="item.user.avatarUrl" alt="" width="50px" height="50px" />
                        <!-- 网名 -->
                        <h3>{{item.user.nickname}}</h3>
                        <!-- 评论内容 -->
                        <p>{{item.content}}</p>
                    </li>
                </ul>
            </div>
            <!-- 播放器进度条 -->
            <audio class="music" @play="play" @pause="pause" :src="url" controls autoplay loop></audio>
        </div>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 官网提供的 axios 在线地址 -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            new Vue({
                el: '#container',
                data() {
                    return {
                        //搜索关键字
                        query: '',
                        //歌曲列表
                        musicList: [],
                        //当前歌曲地址
                        url: '',
                        //海报
                        poster: './img/timg4.jpg',
                        //判断是否正在播放
                        isPlay: false,
                        //评论
                        comment: [],
                    };
                },
                methods: {
                    searchMusic() {
                        if (this.query == '') {
                            return;
                        }
                        axios({
                            url: 'https://autumnfish.cn/search',
                            method: 'get',
                            params: {
                                keywords: this.query,
                            },
                        }).then((res) => {
                            this.musicList = res.data.result.songs;
                        });
                    },
                    playMusic(id) {
                        axios({
                            url: 'https://autumnfish.cn/song/url',
                            method: 'get',
                            params: {
                                id: id,
                            },
                        }).then((res) => {
                            this.url = res.data.data[0].url;
                        });
                        axios({
                            url: 'https://autumnfish.cn/song/detail',
                            method: 'get',
                            params: {
                                ids: id,
                            },
                        }).then((res) => {
                            this.poster = res.data.songs[0].al.picUrl;
                        });
                        axios({
                            url: 'https://autumnfish.cn/comment/hot',
                            method: 'get',
                            params: {
                                type: 0,
                                id: id,
                            },
                        }).then((res) => {
                            this.comment = res.data.hotComments;
                        });
                    },
                    play() {
                        this.isPlay = true;
                    },
                    pause() {
                        this.isPlay = false;
                    },
                },
            });
        </script>
    </body>
</html>
